<template>
  <view class="toCheckBox">
    <cu-head headTitle="去核对信息"></cu-head>
    <view class="toCheckContent">
      <nut-tabs v-model="state.tab4value" title-scroll title-gutter="20">
        <nut-tab-pane v-for="(item,index) in state.list4" :title="item.title" :key='index'>
          <view class="checkConBox" v-if="item.id == '1'">
            <info1></info1>
          </view>
          <view class="checkConBox" v-if="item.id == '2'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '3'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '4'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '5'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '6'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '7'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '8'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '9'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '10'">
            Tab {{item}}
          </view>
          <view class="checkConBox" v-if="item.id == '12'">
            Tab {{item}}
          </view>
        </nut-tab-pane>
      </nut-tabs>
    </view>
  </view>
</template>

<script lang="ts" setup>
import info1 from '@/pages/toCheck/info1.vue'
const state = reactive({
  tab4value: '0',
  list4: [
    {
      title: '手术患者交待表',
      id: '1',
    },
    {
      title: '患者辨识单',
      id: '2',
    },
    {
      title: '患者辨识单',
      id: '3',
    },
    {
      title: '患者辨识单',
      id: '4',
    },
    {
      title: '患者辨识单',
      id: '5',
    },
    {
      title: '患者辨识单',
      id: '6',
    },
    {
      title: '患者辨识单',
      id: '7',
    },
    {
      title: '患者辨识单',
      id: '8',
    },
    {
      title: '患者辨识单',
      id: '9',
    },
    {
      title: '患者辨识单',
      id: '10',
    },
    {
      title: '患者辨识单',
      id: '11',
    },
    {
      title: '患者辨识单',
      id: '12',
    },
    {
      title: '患者辨识单',
      id: '13',
    },
    {
      title: '患者辨识单',
      id: '14',
    },
    {
      title: '患者辨识单',
      id: '15',
    }
  ],
});
</script>

<style lang="scss">
  .toCheckBox{
    min-height: 100vh;
    background: linear-gradient(45deg, #f7f7f7, #f7f7f7,#f3238410, #f3238420);
    .toCheckContent{
      height: calc( 100vh - 40px);
      .checkConBox{
        flex: 1;
        padding: 16px;
        margin: 16px;
        background: rgba(5, 241, 229, 0.1);
        border-radius: 10px;
      }
    }
  }

</style>
<style>
.toCheckBox /deep/.nut-tabs.horizontal{
  display: flex;
  height: 100%;
}
.toCheckBox /deep/.nut-tabs__content{
  flex: 1 !important;
}
.toCheckBox /deep/.nut-tab-pane{
  padding: 0;
  display: flex;
}
/deep/.toCheckBox .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, /deep/.toCheckBox .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item{
  min-width: 100px !important
}
.toCheckBox /deep/.nut-tabs__titles{
  margin-top: 10px !important;
  background: rgba(255,255,255, 0.6) !important;
  backdrop-filter: blur(2px) !important;
  /* background: transparent !important; */
}
</style>
